<template>
  <div>
    <el-form ref="ruleFormRef" :inline="true" :model="ruleForm" class="demo-form-inline" label-width="100px"
      label-position="right" :rules="rules">
      <el-row justify="center">
        <el-col :span="22" :offset="0">
          <el-form-item label="考试成绩：" prop="state">
            <el-select v-model="ruleForm.state" placeholder="请选择考试成绩" clearable>
              <el-option label="等待成绩" value="等待成绩" />
              <el-option label="考试通过" value="考试通过" />
              <el-option label="考试失败" value="考试失败" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-col :span="22" :offset="0">
          <el-form-item label="完成时间：" prop="completeTime">
            <el-date-picker v-model="ruleForm.completeTime" type="date" placeholder="请选择完成时间" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-col :span="22" :offset="0">
          <el-form-item label="备注：" prop="comment">
            <el-input v-model="ruleForm.comment" placeholder="" clearable />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row justify="end">
        <el-col :span="6" :offset="0">
          <el-form-item>
            <el-button type="warning" @click="submitForm(ruleFormRef)">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { mockBatchPut } from "../../../api/student"
import { dateFormat } from "../../../utils/timeFomat"
import { mockExamType } from '../../../types/examType'

interface Props {
  selArr: Array<string>,
  tableData: mockExamType[],
}
let sels = defineProps<Props>()
const ruleForm = reactive({
  state: "",
  completeTime: '',
  comment: ''
})

//实现子父通信
const emit=defineEmits(['getNewTableDate'])
let ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  state: [
    { required: true, message: '请选择考试成绩' },
  ],
  completeTime: [
    {
      type: 'date',
      required: true,
      message: '请选择完成时间',
      trigger: 'change',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.completeTime = dateFormat(ruleForm.completeTime, 'YYYY-MM-DD')
      sels.tableData.forEach(item => {
        if (sels.selArr.includes(item.objectId)) {
          if (ruleForm.state) {
            item.state = ruleForm.state
          }
          if (ruleForm.completeTime) {
            item.completeTime = ruleForm.completeTime
          }
          if (ruleForm.comment) {

            item.comment = ruleForm.comment
          }
        }

      })

      emit("getNewTableDate",sels.tableData)
      mockBatchPut(sels.selArr, ruleForm).then(() => {
        console.log("修改成功");

      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

<style scoped></style>